<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="productFormRules" :model="productForm" label-position="left" label-width="140px">
        <el-form-item label="产品" prop="setting">
             <el-table
              :data="productList"
                @selection-change="handleSelectionChange"
              style="width: 100%">
              <el-table-column
                prop="title"
                label="标题">
              <template slot-scope="{row}">
                <span>{{row.title}}</span>
              </template>
              </el-table-column>
              <el-table-column
                prop="price"
                width="200"
                label="原价">
              <template slot-scope="{row}">
                <span>{{row.originalPrice}}</span>
              </template>
              </el-table-column>
              <el-table-column
                prop="price"
                width="200"
                label="市场价">
              <template slot-scope="{row}">
                <span>{{row.price}}</span>
              </template>
              </el-table-column>
              <el-table-column
                prop="commissionPrice"
                width="200"
                label="分销价格">
              <template slot-scope="{row}">
                <span><el-input v-model="row.commissionPrice" @change="createData(row)" /></span>
              </template>
              </el-table-column>
              <el-table-column
                prop="alias"
                width="200"
                label="佣金">
              <template slot-scope="{row}">
                <span><el-input v-model="row.commission" @change="createData(row)" /></span>
              </template>
              </el-table-column>
            </el-table>
        </el-form-item>
      <el-form-item label="描述" prop="remark">
        <el-input v-model="productForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="备注" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
    </div>
  </div>
</template>

<script>
import { saveProduct, removeProductByID, getProductDetail } from '@/api/distribution/product'
import {  getProductListByDistribution } from '@/api/supply/product'
import waves from '@/directive/waves' // waves directive
import { } from '@/utils'

export default {
  name: 'ComplexTable',
  components: { },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      allowedSettingRemove:false,
      productForm: {
        code: '',
        title: '',
        remark: '',
        setting:[
          {
            catalogueID:undefined,
            url:"",
            alias:""
          }
        ],
        status: {
          label: '',
          value: 1
        }
      },
      productList:[],
      productFormRules: []
    }
  },
  created() {
    let productID = this.$route.query && this.$route.query.productID
    if (productID !== undefined) {
      productID = parseInt(productID)
      if (!isNaN(productID)) {
        this.listLoading = true
        const formData = {
          'productID': productID
        }
        getProductDetail(formData).then(response => {
          if (response.status === 200) {
            this.productForm = response.data
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
    console.log(productID)
    this.loadProductList();
  },
  methods: {
    handleCannel() {
      this.$router.push({ path: 'product' })
    },
    handleSelectionChange:function(){

    },
    loadProductList:function(){
        this.listLoading = true
        getProductListByDistribution().then(response => {
            this.productList = response.data.list
            this.productTotal = response.data.total

            // Just to simulate the time of the request
            setTimeout(() => {
            this.listLoading = false
            }, 1.5 * 1000)
        })
    },
    createData(formData) {
      this.listLoading = true
      let _formData = Object.assign(formData,this.productForm);
      try {
          _formData.status = _formData.status.value
          if(_formData.status == undefined){
              _formData.status = 6
          }
      } catch (error) {
        _formData.status = 6
      }
      let commissionPrice = parseInt(_formData['commissionPrice'])
      let commission = parseInt(_formData['commission'])
      if(commissionPrice > 0 && commission > 0){
            _formData['productID'] = _formData['ID']
            console.log(_formData)
            if (_formData.ID > 0) {
                _formData.productID = _formData.ID
            }
            saveProduct(_formData).then(response => {
                if (response.status === 200) {
                    this.$message({
                        message: '操作Success',
                        type: 'success'
                    })
                    this.loadProductList()
                } else {
                    this.$message({
                        message: response.msg,
                        type: 'error'
                    })
                }
            })

      }
    },
    handleDelete(row, index) {
      const fromdata = {
        'productID': row.ID
      }
      removeProductById(fromdata).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          this.$router.push({ path: 'product' })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
